<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-09-11 23:07:50
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-10-22 23:31:53
-->
<template>
  <a-modal
    :open="visible"
    :keyboard="false"
    :maskClosable="false"
    :title="title"
    @cancel="onCancel"
    @ok="onSubmit"
    :confirmLoading="submitLoading"
    :width="960"
  >
    <a-form ref="formRef" v-bind="formLayout" :model="model" :rules="rules">
      <a-form-item label="业务类别">
        <dictionary-select
          v-model:value="model.bussinessType"
          name="Platform.AttachmentBusinessType"
          :disabled="isEdit"
        />
      </a-form-item>
      <a-form-item label="分组名称">
        <a-input v-model:value="model.groupName"></a-input>
      </a-form-item>
      <a-form-item label="参数定义">
        <attachment-fields :items="model.defineFields" />
      </a-form-item>
      <a-form-item label="最大附件数">
        <a-input-number v-model:value="model.maxLength" :min="0" :max="999" />
        <a-alert
          style="margin-top: 10px"
          type="warning"
          message="注：取值范围0-999,不限制附件上传个数则配置值为0及可"
        ></a-alert>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import api from "@/api/resource/attachmentConfig";
import { AttachmentConfigDto, AttachementFieldDto } from "@/api/resource/types";
import { useFormPage } from "@/helpers/pages";
import { FormInstance } from "ant-design-vue";
import { computed, onMounted, ref, watch } from "vue";
import AttachmentFields from "./components/AttachmentFields.vue";
const formRef = ref<FormInstance>();
const emits = defineEmits(["update:visible", "close", "success"]);
const props = defineProps({
  id: String,
  visible: { type: Boolean, default: false },
  action: {
    type: String,
    default: "create",
  },
  item: {
    type: Object,
    default() {
      return {};
    },
  },
});

const { model, rules, formLayout, loading, submitLoading } = useFormPage<
  AttachmentConfigDto,
  string
>({
  formLayout: {
    labelCol: { span: 2 },
    labelAlign: "right",
    wrapperCol: { span: 21 },
  },
  model: {
    bussinessType: "",
    groupName: "",
    defineFields: [],
    maxLength: 0,
  },
});

const isEdit = computed(() => {
  return props.action === "edit";
});

/**
 * 弹窗标题
 */
const title = computed(() => {
  return isEdit.value ? "修改附件配置信息" : "添加附件配置信息";
});

/**
 * 加载数据
 */
const loadData = () => {
  if (isEdit.value) {
    loading.value = true;
    api.get(props.id).then((res) => {
      res.defineFields.map((item) => {
        if (item.defaultValue) {
          item.defaultValue = JSON.parse(item.defaultValue);
        }
      });
      Object.assign(model, res);
      loading.value = false;
    });
  }
};

/**
 * 提交
 */
const onSubmit = () => {
  emits("success");
  formRef.value.validate().then(() => {
    let formData = {
      ...model,
      defineFields: model.defineFields.map((x) => {
        return {
          ...x,
          defaultValue: JSON.stringify(x.defaultValue || ""),
        };
      }),
    };
    let request = isEdit.value
      ? api.update(props.id, formData)
      : api.create(formData);
    submitLoading.value = true;
    request.then((res) => {
      emits("success", res);
      emits("update:visible", false);
      emits("close");
    })
      .finally(() => {
        submitLoading.value = false;
      });
  });
};

/**
 * 取消
 */
const onCancel = () => {
  emits("update:visible", false);
  emits("close");
};

watch(
  () => props.visible,
  (val: boolean) => {
    console.log("visible changed,val,", val);
    val && loadData();
  },
  { immediate: true }
);
</script>

<style lang="less" scoped></style>
